<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{ width: 100px; height: 100px; background: red; float: left;}
        #box2{ width: 200px; height: 200px; background: rgb(24, 228, 24); clear: left;}

        #box3{width: 200px; border: 2px black solid;}
        #box4{width: 100px; height: 100px; background: red; float: left;}

        #box5{width: 200px; border: 2px black solid;}
        #box6{width: 100px; height: 100px; background: red; float: left;}
        .clear1{clear: both;}
        .clear2:after {content: ''; clear:both ; display: block;} 
        /* after伪类：推荐，是空标签的加强版，目前各大公司的做法。  */
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <br>
    <div id="box3">
       <div id="box4"></div> 
       <div class="clear1">这是一个空标签</div>   <!-- 设置空标签：不推荐，会多添加一个标签 -->
     
    </div>
    aaaaaaaaa
    <br><br>
    <div id="box5" class="clear2">
        <div id="box6"></div> 
      
      
     </div>
    bbbbbbbbb
</body>
</html>